<template>
  <div class="home">
    <!-- 搜索 -->
   <search></search>
    <!-- 首页轮播图 -->
    <swiper
      indicator-dots
      indicator-color="rgba(225, 225, 225, .5)"
      indicator-active-color="#fff"
      autoplay
      circular
      class="index-slide"
    >
      <block v-for="(item,index) in imgs" :key="index">
        <swiper-item>
          <image :src="item.image_src" class="slide-image" model="widthFix"></image>
        </swiper-item>
      </block>
    </swiper>
    <div class="meau">
      <div class="meau-img" v-for="(item,index) in meaus" :key="index">
         <image :src="item.image_src" ></image>
      </div>
    </div>
    <div class="product">
      <div class="product-item" v-for="(item,index) in productlist" :key="index">
        <div class="tytle">
           <image :src="item.floor_title.image_src"  model="aspectFit"></image>
        </div>
        <div class="item-content">
          <div class="content-left">
            <image :src="item.product_list[0].image_src" alt="" model="aspectFit"></image>
          </div>
          <div class="content-right">
              <div class="img-box">
                <image 
                :src="item2.image_src" 
                alt="" 
                model="aspectFit"   
                v-for="(item2,index2) in item.product_list" 
                :key="index2" 
                v-show="index2!==0">
              </image>
              </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
// import request from '@/utils/request.js'
import search from '@/components/search'
import {getSwiperData,getCatItems,getFloorData} from '@/api'
export default {
  data() {
    return {
      imgs: [],
      meaus:[],
      productlist:[]
    }
  },
  components:{
    search
  },
  mounted() {
    // request('https://itjustfun.cn/api/public/v1/home/swiperdata').then(res=>{
    //   this.imgs=res.data.data
    // })
    //  request('https://www.zhengzhicheng.cn/api/public/v1/home/catitems').then(res=>{
    //   this.meaus=res.data.message
    // })
    // request('https://www.zhengzhicheng.cn/api/public/v1/home/floordata').then(res=>{
    //   this.productlist=res.data.message
    // })



    // let that = this;
    // wx.request({
    //   url: "https://itjustfun.cn/api/public/v1/home/swiperdata",

    //   success(res) {
    //    that.imgs=res.data.data
    //   }
    // });
    // wx.request({
    //   url:"https://itjustfun.cn/api/public/v1/home/catitems",
    //    success:(res)=>{
    //      this.meaus=res.data.data
    //    }
    // })
    this.init()
  },
  methods:{
    init(){
      getSwiperData().then(res=>{
        console.log(res)
        this.imgs=res.data.message
      })
      getCatItems().then(res=>{
        console.log(res)
        this.meaus=res.data.message
      })
       getFloorData().then(res=>{
         console.log(res)
        this.productlist=res.data.message
      })
    }
  }
};
</script>
<style lang="scss" scoped>
.index-slide {
  height: 340rpx;
}
.slide-image {
  height: 100%;
  width: 100%;
}
.meau{
  padding: 24rpx 0 29rpx;
  display: flex;
  justify-content: space-around
}
.meau-img{
  width: 128rpx;
  height: 140rpx;
  image{
  width: 100%;
  height: 100%;
  }
}
.product{
  .product-item{
    .tytle{
      height: 88rpx;
      width: 100%;
      background: #f4f4f4;
      image{
        height:88rpx
      }
      }
      .item-content{
        padding: 20rpx 6rpx 20rpx 16rpx;
        display: flex;
        .content-left{
          margin-right: 10rpx;
          image{
             width: 232rpx;
             height: 386rpx;
          }
        }
        .content-right{
          display: flex;
          flex-wrap: wrap;
          .img-box{
            image{
              width: 232rpx;
              height: 188rpx;
              margin-right: 10rpx;
            }
          }
        }
      }
  }
  
}
</style>
